
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cal_game {
            width: 650px;
            margin: 0 auto;
        }
        
        table {
            margin: 0 auto;
        }
        
        td {
            width: 150px;
            height: 50px;
            text-align: center;
            line-height: 40px;
            border: 1px solid #ab15fd;
        }
        
        .btn {
            width: 150px;
            height: 50px;
            color: #ab15fd;
            border: 1px solid #ab15fd;
            background-color: #fff;
        }
        
        .btn:hover {
            background-color: #ab15fd;
            color: #fff;
            cursor: pointer;
        }
        
        input {
            height: 30px;
            border: 1px solid #999999;
        }
    </style>
</head>

<body>
    <div class="cal_game">
        <table>
            <tr>
                <td id="output" colspan="3"></td>
            </tr>
            <tr>
                <td>题目</td>
                <td id="eq" colspan="2"></td>
            </tr>
            <tr>
                <td>答案</td>
                <td><input type="text" name="" id="input" placeholder="请输入计算结果："></td>
                <td><button class="btn" onclick="xun()">计算</button></td>
            </tr>
            <tr>
                <td>正误</td>
                <td id="result" colspan="2"></td>
            </tr>
            <tr>
                <td>得分</td>
                <td id="score" colspan="2"></td>
            </tr>
            <tr>
                <td id="accuracy" colspan="3"></td>
            </tr>
        </table>
    </div>
    <script>
        // 定义题号，使用时+1
        var i = 0;
        // 定义计算正确的次数
        var right_times = 0;
        // 定义分数
        var score = 0;
        // 定义正确率
        var accuracy = 0;
        // 定义加减法符号数组，用于后边产生0或1的随机数，来确定加减法
        var sign_operation_list = ["+", "-"];
        // 生成0或者1的随机数，确定加减法
        var sign_operation = Math.floor((Math.random() * (1 - 0 + 1)) + 0);
        // 显示题号
        document.getElementById("output").innerHTML = "第" + (i + 1) + "题";
        // 如果是减法
        if (sign_operation == 1) {
            // 则被减数应该小于减数，结果才不会为负数
            // 减数范围为0-200
            var num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
            // 被减数范围为0-减数
            var num2 = Math.floor(Math.random() * (num1 - 0 + 1) + 0);
        }
        // 如果是加法
        if (sign_operation == 0) {
            // 两数和应小于200
            // 第一个数的范围是0-200
            var num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
            // 第二个数是0-（200-第一个数）
            var num2 = Math.floor(Math.random() * (200 - num1 - 0 + 1) + 0);
        }
        // 组成算式，显示给用户看
        var eq = String(num1) + sign_operation_list[sign_operation] + String(num2) + "=";
        // 页面中显示算式
        document.getElementById("eq").innerHTML = eq;
        // console.log(eq);

        // 定义函数，当按钮按下是执行一次
        function xun() {
            // console.log(num1, num2);
            // 题号加1
            i++;
            // 获取用户输入的结果
            var input = Number(document.getElementById("input").value);
            // console.log(input, num1, num2);
            // 如果是加法
            if (sign_operation == 0) {
                // 定义真实结果
                var calResult = num1 + num2;
                // 如果用户输入的结果和真实结果相同
                if (input == calResult) {
                    // 分数加10分
                    score += 10;
                    // console.log("正确！");
                    // 显示正确信息
                    document.getElementById("result").innerHTML = "正确";
                    // 正确的次数加1
                    right_times++;
                }
                // 如果用户输入的结果和真实结果不同
                if (input != calResult) {
                    // 分数减10分
                    score -= 10;
                    // console.log("错误！");
                    // 显示错误信息
                    document.getElementById("result").innerHTML = "错误";
                }
            } // 如果是减法
            if (sign_operation == 1) {
                // 定义真实结果
                var calResult = num1 - num2;
                // 如果用户输入的结果和真实结果相同
                if (input == calResult) {
                    // 分数加10分
                    score += 10;
                    // console.log("正确！");
                    // 显示正确信息
                    document.getElementById("result").innerHTML = "正确";
                    // 正确的次数加1
                    right_times++;
                }
                // 如果用户输入的结果和真实结果不同
                if (input != calResult) {
                    // 分数减10分
                    score -= 10;
                    // console.log("错误！");
                    // 显示错误信息
                    document.getElementById("result").innerHTML = "错误";
                }
            }
            // 判断结果后，用户输入框清空
            document.getElementById("input").value = "";
            // 显示分数
            document.getElementById("score").innerHTML = score;
            // 显示正确率
            document.getElementById("accuracy").innerHTML = (((right_times / i) * 100).toFixed(2)) + "%";

            // 生成0或者1的随机数，确定加减法
            sign_operation = Math.floor((Math.random() * (1 - 0 + 1)) + 0);
            // 显示题号
            document.getElementById("output").innerHTML = "第" + (i + 1) + "题";
            // 如果是减法
            if (sign_operation == 1) {
                // 则被减数应该小于减数，结果才不会为负数
                // 减数范围为0-200
                num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
                // 被减数范围为0-减数
                num2 = Math.floor(Math.random() * (num1 - 0 + 1) + 0);
            }
            // 如果是加法
            if (sign_operation == 0) {
                // 两数和应小于200
                // 第一个数的范围是0-200
                num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
                // 第二个数是0-（200-第一个数）
                num2 = Math.floor(Math.random() * (200 - num1 - 0 + 1) + 0);
            }
            // 组成算式，显示给用户看
            eq = String(num1) + sign_operation_list[sign_operation] + String(num2) + "=";
            // 页面中显示算式
            document.getElementById("eq").innerHTML = eq;
            // console.log(eq);
        }
    </script>
</body>

</html>